<template>
    <div class="content-main">
        <div class="breadcrumb">
            <div class="breadcrumb-icon">
                <img src="./../../assets/images/breadcrumb_icon.png" />
            </div>
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>教学设置</el-breadcrumb-item>
            </el-breadcrumb>
            <bread-crumb-back></bread-crumb-back>
        </div>
        <div class="content-box">
            <div class="search-box">
                <div class="search-item">
                    <span class="search-title">班级名称: </span>
                    <el-select
                        v-model="classStatusValue"
                        placeholder="请选择班级"
                        value-key="value"
                        style="float:left;">
                        <el-option
                        v-for="item in classStatus"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </div>
                <div class="search-item">
                    <span class="search-title">案例名称: </span>
                    <el-select
                        v-model="projectNameValue"
                        placeholder="请选择班级"
                        value-key="value"
                        style="float:left;">
                        <el-option
                        v-for="item in projectNameStatus"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </div>
                <div class="search-item">
                    <span class="search-title">案例状态: </span>
                    <el-select
                        v-model="projectStatusValue"
                        placeholder="请选择案例状态"
                        value-key="value"
                        style="float:left;">
                        <el-option
                        v-for="item in projectStatus"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </div>
                <div class="search-item">
                    <el-button type="primary" @click="searchFn">搜索</el-button>
                </div>
            </div>
            <div class="table-content" v-loading="tableLoading">
                <el-table
                :data="tableData"
                border
                style="width: 100%">
                    <el-table-column label="序号" width="100px">
                        <template slot-scope="scope"><span>{{scope.$index+(currentPage - 1) * pagesize + 1}}</span> </template>
                    </el-table-column>
                    <el-table-column  prop="className" label="班级">
                    </el-table-column>
                    <el-table-column  prop="projectName" label="案例">
                    </el-table-column>
                    <el-table-column  prop="projectStatus" label="案例状态">
                        <template slot-scope="scope">
                            {{ scope.row.endMark == 0 ? '未结项' : '已结项' }}
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button type="text" size="small" @click="paramSet(scope.row.classId, scope.row.projectId, scope.row.className, scope.row.projectName, scope.row.classRelation.codeShow, scope.row.classRelation.fileShow, scope.row.classRelation.teachPatternSwitch, scope.row.classRelation.practicePatternSwitch)">参数设置</el-button>
                            <!-- <el-button type="text" size="small" @click="evaluationSet(scope.row.classId, scope.row.projectId, scope.row.classRelation.excellentUp,scope.row.classRelation.excellentDown,scope.row.classRelation.goodUp,scope.row.classRelation.goodDown,scope.row.classRelation.middleUp,scope.row.classRelation.middleDown,scope.row.classRelation.badUp, scope.row.classRelation.badDown)">评分设置</el-button> -->
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-size="pagesize"
                    layout="total, prev, pager, next, jumper"
                    :total="totalCount"
                    style="margin-top: 20px; text-align: center;">
                </el-pagination>
            </div>
            <el-dialog title="教学参数设置" :visible.sync="dialogFormVisible">
                <el-form :model="form" ref="form" label-width="170px">
                    <el-form-item label="班级名称 :">
                        <span>{{ form.className }}</span>
                    </el-form-item>
                    <el-form-item label="案例名称 :">
                        <span>{{ form.projectName }}</span>
                    </el-form-item>
                    <el-form-item label="是否开放案例源码 :">
                        <el-radio-group v-model="form.isProjectCodeStatus">
                            <el-radio :label="1">是</el-radio>
                            <el-radio :label="0">否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="是否开放实训案例文档 :">
                        <el-radio-group v-model="form.isProjectDocumentStatus">
                            <el-radio :label="1">是</el-radio>
                            <el-radio :label="0">否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="是否开启教学模式 :">
                        <el-radio-group v-model="form.isTeachingStatus">
                            <el-radio :label="1">是</el-radio>
                            <el-radio :label="0">否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="是否开启练习模式 :">
                        <el-radio-group v-model="form.isPracticeStatus">
                            <el-radio :label="1">是</el-radio>
                            <el-radio :label="0">否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer" style="text-align:center;">
                    <el-button type="primary" @click="submitForm('form')">保存</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    import BreadCrumbBack from '@/components/breadCrumbBack.vue'
    export default {
        components: {
            BreadCrumbBack
        },
        data () {
            return {
                classId: '',
                projectId: '',
                classStatus: [
                    {
                        value: '',
                        label: '全部'
                    }
                ],
                classStatusValue: '',
                projectNameStatus: [
                    {
                        value: '',
                        label: '全部'
                    }
                ],
                projectNameValue: '',
                projectStatus: [
                    {
                        value: '',
                        label: '全部'
                    },
                    {
                        value: 1,
                        label: '已结项'
                    },
                    {
                        value: 0,
                        label: '未结项'
                    }
                ],
                projectStatusValue: '',
                tableLoading: false,
                tableData: [],
                currentPage: 1,
                pagesize: 10,
                totalCount: 1000,

                dialogFormVisible: false,
                formLabelWidth: '170px',
                form: {
                    className: '',
                    projectName: '',
                    isProjectCodeStatus: 1,
                    isProjectDocumentStatus: 1,
                    isTeachingStatus: 1,
                    isPracticeStatus: 1
                }
            }
        },
        created () {
            this.init()
            this.initTbale()
        },
        methods: {
            init(){
                let self = this
                self.$http.get('/dataplatform/common/search/listClassItem').then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        for (let i = 0; i < res.data.classList.length; i++) {
                            let classJson = {}
                            classJson.label = res.data.classList[i].name
                            classJson.value = res.data.classList[i].id
                            self.classStatus.push(classJson)
                        }
                        for (let i = 0; i < res.data.itemList.length; i++) {
                            let itemListJson = {}
                            itemListJson.label = res.data.itemList[i].name
                            itemListJson.value = res.data.itemList[i].id
                            self.projectNameStatus.push(itemListJson)
                        }
                    }else if(res.code == '401'){
                        self.$router.replace({
                            path:'/login'
                        })
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            initTbale(){
                let self = this
                self.$http.get('/dataplatform/basis/func/param/paramManaList?pageNum='+self.currentPage+'&pageSize='+self.pagesize+'&projectId='+self.projectNameValue+'&classId='+self.classStatusValue+'&endMark='+self.projectStatusValue).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.tableData = res.data.list
                        self.totalCount = res.data.total
                    }else if(res.code == '401'){
                        self.$router.replace({
                            path:'/login'
                        })
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            //表格分页
			handleSizeChange: function (size) {
				this.pagesize = size;
			},
			handleCurrentChange: function(currentPage) {
                this.currentPage = currentPage
                this.initTbale()
            },
            //参数设置
            paramSet(classId, projectId, className, projectName, codeShow, fileShow, teachPatternSwitch, practicePatternSwitch) {
                this.dialogFormVisible = true
                this.form.className = className
                this.form.projectName = projectName
                this.form.isProjectCodeStatus = codeShow
                this.form.isProjectDocumentStatus = fileShow
                this.form.isTeachingStatus = teachPatternSwitch
                this.form.isPracticeStatus = practicePatternSwitch
                this.classId = classId
                this.projectId = projectId
            },
            //参数设置表单提交
            submitForm(formName) {
                let self = this
				self.$http.post('/dataplatform/basis/func/param/saveTeachParam',{
                    userId: null,
                    classId: self.classId,
                    projectId: self.projectId,
                    codeShow: self.form.isProjectCodeStatus,
                    fileShow: self.form.isProjectDocumentStatus,
                    teachPatternSwitch: self.form.isTeachingStatus,
                    practicePatternSwitch: self.form.isPracticeStatus
                }).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.$message({
                            message: '参数设置成功',
                            type: 'success'
                        })
                        self.initTbale()
                        self.dialogFormVisible = false
                    }else if(res.code == '401'){
                        self.$router.replace({
                            path:'/login'
                        })
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            //搜索
            searchFn() {
                this.currentPage = 1
                this.initTbale()
            }
        }
    }
</script>
